<template>
    <div>
        <van-nav-bar title="查看库存" left-arrow @click-left="backUp"></van-nav-bar>
        <section v-for="item in inventories" :key="item.goodsId">
            <img :src="item.subImage"/>
            <div class="desc">
                <h4>{{item.goodsName}}</h4>
                <p>简介：{{item.caption}}</p>
                <p>库存：{{item.inventory}}件</p>
                <p>¥{{item.price}}</p>
            </div>
        </section>
    </div>
</template>
<script>
    import api from "@/utils/restful";

    export default {
        data() {
            return {
                inventories: []
            };
        },
        mounted() {
            let memberId = this.$route.query.memberId;
            this.getInventory(memberId);
        },
        methods: {
            getInventory(memberId) {
                this.$axios({
                    method: "get",
                    url: api.memberInventory,
                    params: {
                        token: localStorage.getItem("token"),
                        memberId: memberId
                    }
                }).then(res => {
                    console.log(res);
                    if (res) {
                        this.inventories = res.data;
                    }
                });
            },
            backUp() {
                this.$router.go(-1);
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    section {
        margin: 10px;
        background-color: #fff;
        box-shadow: 0px 0px 6px 0px rgba(202, 202, 202, 0.5);
        border-radius: 10px;
        padding: 20px;
        display: flex;
        align-items: center;

        img {
            width: 100px;
            height: 100px;
            margin-right: 20px;
        }

        .desc {
            h4 {
                .font-dpr(18px);
                color: @fontColorH3;
            }

            p {
                .font-dpr(14px);
                color: #868686;

                &:last-child {
                    .font-dpr(20px);
                    font-weight: bold;
                    color: #e54343;
                }
            }
        }
    }
</style>
